<template>
  <el-header
      style="font-size: 12px; background-color: #545c64; color: #fff; display: flex; justify-content: space-between; align-items: center;"
  >
    <!-- Logo -->
    <div class="header-logo">校事达</div>

    <!-- Navigation Menu and User Info -->
    <div class="header-right">
      <el-menu
          mode="horizontal"
          class="header-menu"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleMenuSelect"
      >
        <!-- 动态渲染菜单项 -->
        <template v-if="isAuthenticated && userType === 'admin'" class="right">
          <el-menu-item index="1">管理员中心</el-menu-item>
          <el-menu-item index="2">用户管理</el-menu-item>
          <el-menu-item index="3">平台管理</el-menu-item>
        </template>
        <template v-else-if="isAuthenticated && userType === 'user'" class="right">
          <el-menu-item index="4">任务中心</el-menu-item>
          <el-menu-item index="5">个人中心</el-menu-item>
        </template>
        <template v-else>
          <el-menu-item index="6" @click="goToLogin">登录</el-menu-item>
          <el-menu-item index="7" @click="goToRegister">注册</el-menu-item>
        </template>
      </el-menu>

      <!-- User Info -->
      <div class="header-user-info" v-if="isAuthenticated">
        <el-avatar
            class="user-avatar"
            @click="toggleUserMenu"
        >
          <img src="../images/head.jpg" @click.stop="toggleUserMenu" />
        </el-avatar>
        <span class="user-name">超级管理员</span>
        <el-button
            class="logout-button"
            type="text"
            @click="confirmLogout"
        >
          退出登录
        </el-button>
      </div>
    </div>
  </el-header>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: "HeaderComponent",
  computed: {
    ...mapState(['isAuthenticated', 'userType']), // 从 Vuex 中获取状态
  },
  methods: {
    ...mapActions(['setAuthenticated', 'setUserType']),
    toggleUserMenu() {
      console.log("要跳转罗")
      if( this.$store.state.userType ==='admin') {
        if (this.$route.path !== "/adminProfile") {
          this.$router.push('/adminProfile');
        }
      }
      else {
        if (this.$route.path !== "/userInformation") {
          this.$router.push('/userInformation');
        }
      }
    },
    // Confirm logout
    confirmLogout() {
      this.$confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            this.logout();
          })
          .catch(() => {
            console.log("Logout canceled");
          });
    },
    logout() {
      this.setUserType('none');
      this.setAuthenticated(false);
      this.$router.push("/login");
    },
    goToLogin() {
      if (this.$route.path !== "/login") {
        this.$router.push("/login");
      }
    },
    goToRegister() {
      if (this.$route.path !== "/register") {
        this.$router.push("/register");
      }
    },
    handleMenuSelect(index) { // 根据 index 处理路由跳转
      switch (index) {
        case '1':
          if (this.$route.path !== "/adminProfile") {
            this.$router.push('/adminProfile');
          }
          break;
        case '2':
          if (this.$route.path !== "/adminTaskManagement") {
            this.$router.push('/adminTaskManagement');
          }
          break;
        case '3':
          if (this.$route.path !== "/adminMaintenance") {
            this.$router.push('/adminMaintenance');
          }
          break;
        case '4':
          if (this.$route.path !== "/userHaveTask") {
            this.$router.push('/userHaveTask');
          }
          break;
        case '5':
          if (this.$route.path !== "/userInformation") {
            this.$router.push('/userInformation');
          }
          break;
        case '6':
          this.goToLogin();
          break;
        case '7':
          this.goToRegister();
          break;
        default:
          console.warn("No route defined for index:", index);
      }
    }
  }
};
</script>

<style scoped>

.header-logo {
  font-size: 18px;
  font-weight: bold;
  margin-right: 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-menu {
  display: inline-block;
  margin-right: 20px;
}

.header-user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 10px;
  cursor: pointer;
}

.user-name {
  margin-right: 10px;
}

.logout-button {
  color: #ffd04b;
  cursor: pointer;
}
</style>